body {
  margin: 0;
  background-color: #5473d8;
  min-height: 100vh;

  /* Cambiamos la dirección del flex a columna */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente todo */
}

.contenedor {
  font-family: sans-serif;
  background-color: #5473d8;
  width: 100%;
  max-width: 565px;
  flex: 1; /* Ocupa todo el espacio vertical restante */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50px;
  position: sticky; /* o fixed si quieres que quede fijo */
  top: 0;
  background-color: #5473d8; /* mismo color que el fondo */
}

.resaltado {
  color: rgb(255, 168, 5);
}

h2 {
  color: rgb(255, 255, 255);
  font-size: 2rem;
}

.header-content {
  text-align: center;
}

 
    .manu-icon{
        cursor: pointer;
     width: 100px;
        height: 100px;
    }
    .seleccion{
        border-radius: 5px;
        width: 830px;
        margin-left: 40px;
        height: 100px;
    }
    .menu-seleccion{
        display: flex;
        justify-content: right;
        align-items: center;   
    }
    .form-row button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        font-size: 1.2em;
    }
    
    #total {
        text-align: right;
        margin-top: 10px;
        font-weight: bold;
      

    }
    

    
    .keyboard button {
        padding: 15px;
       
        border: 1px solid #5a5a5a;
        border-radius: 15px;
        background-color: #ffffff;
        cursor: pointer;
       
            font-size: 2em; /* Aumenta el tamaño del número */
            text-align: center;

               
                
                
               
        }
    
    
    .keyboard button:active {
        background-color: #ffffff;
    }
    
    .keyboard button.wide {
        grid-column: span 2;
    }
    
    .keyboard button.tall {
        grid-row: span 2;
    }
    
    .keyboard button.clear {
        background-color: #d85454; /* Rojo claro para limpiar */
    }
    
    .keyboard button.enter {
        background-color: #5473d8;
       
            grid-row: span 2;
            align-self: stretch;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #5473d8;
            color: white;
            font-size: 45px;
          
          } /* Verde claro para enter */
    
    
    .keyboard button.printer {
        font-size:3em; /* Ajustar el tamaño del icono */
        border: none;
    }

   .loteria1{
    width: 80px;
    height:80px ;
   }


    
    .monto {
        font-size: 1em; /* Tamaño grande */
        color: #333; /* Gris oscuro */
        text-align: left;
        padding-left:5px; /* Espacio para el símbolo $ */
        background-color: #f5f5f5; /* Fondo claro */
        width:65px;
        height: 30px;
       margin: 0;
    }


    .form-row label {
       width: 10px;
     

    }
    .form-row input[type="text"] {
        flex-grow: 1;
        padding: 8px;
        border: 1px solid #ffffff;
    }
    
    /* Estilo para hacer los campos de entrada de números redondos */
    .form-row input[id^="numero"] {
      
        text-align: center; /* Centrar el texto dentro del círculo */
       
        background: #5473d8;
    border: none;
   
    
    
}
    
    
   
    .form-row button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        font-size: 1.2rem;}

        
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.recycle img{
   top: 3px;
    width: 35px;

  
   

   
    
}

.form-row .lotery{
   margin-left: 5px;
 
}


/* Estilo para los números en los campos de número */




/* Estilo para el símbolo $ fijo */


.active-input {
    border: 2px solid #007bff;
    outline: none;
}
.active-input {
    border: 2px solid #007bff;
    outline: none;
}